<template>
	<el-upload v-if="limit==1" class="avatar-uploader"
		:action="config.baseUrl + '/' + config.addons + '/xcmy_api/upload'" 
		:headers="{'clogintoken': clogintoken}"
		:show-file-list="false" :on-success="handleAvatarSuccess_single">
		<img v-if="file" :src="file" class="avatar" />
		<el-icon v-else class="avatar-uploader-icon">
			<Plus />
		</el-icon>
	</el-upload>

	<el-upload v-if="limit>1" v-model:file-list="fileList" multiple :limit="limit"
		:action="config.baseUrl + '/' + config.addons + '/xcmy_api/upload'" :headers="{'clogintoken': clogintoken}"
		list-type="picture-card" :on-success="handleAvatarSuccess" :on-exceed="handleExceed">
		<el-icon>
			<Plus />
		</el-icon>
	</el-upload>

	<el-dialog v-model="control.dialogVisible">
		<img w-full :src="control.dialogImageUrl" alt="Preview Image" />
	</el-dialog>
</template>
<script>
	import config from "@/config/config.js";
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import xcCloginUtils from '@/library/xcore/js/XcCloginUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';

	export default {
		props: {
			modelValue: {
				type: String,
				default: ""
			},
			limit: {
				type: Number,
				default: 5,
			}
		},
		watch: {
			'modelValue': {
				handler(newVal, oldVal) {
					let that = this;
					if (xsStringUtils.startsWith(that.modelValue, "data:image")) {
						that.$emit('update:modelValue', null);
						return [];
					}
					if(that.limit==1){
						that.file = that.modelValue;
					}else{
						let farray = that.modelValue.split(",");;
						that.fileList = [];
						for (let i = 0, j = farray.length; i < j; i++) {
							let fstring = farray[i];
							let url = fstring;
							if (fstring.indexOf("http") != 0) {
								url = config.image_baseUrl + fstring;
							}
							that.fileList.push({
								url: url
							});
						}
					}	
				},
			},
		},
		data() {
			return {
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {},
				sr: {},
				control: {
					dialogVisible: false,
					dialogImageUrl: ""
				},
				fileList: [],
				file:null,
				clogintoken: null,
			}
		},
		created() {
			let that = this;
			that.xinit();
		},
		methods: {
			xinit() {
				let that = this;
				that.clogintoken = xcCloginUtils.getSessionToken();
			},
			public_show() {
				let that = this;
			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			control_click() {
				let that = this;
				that.$emit('update:modelValue', "Hello World!");
			},
			handleAvatarSuccess(response, uploadFile, fileList) {
				let that = this;
				let resultList = [];
				for (let i = 0, j = fileList.length; i < j; i++) {
					let res = fileList[i].response;
					if (res == null) {
						resultList.push(fileList[i]);
					} else if (res.code == 1) {
						resultList.push({
							url: res.data.fullurl
						});
					} else {
						xcViewUtils.message_error(res.msg);
					}
				}
				that.fileList = resultList;
				that.$emit('update:modelValue', that._convertFileListToValue(that.fileList));
			},
			_convertFileListToValue() {
				let that = this;
				let values = [];
				for (let i = 0, j = that.fileList.length; i < j; i++) {
					let url = that.fileList[i]["url"];
					values.push(url);
				}
				return values.join(',');
			},
			handleExceed() {
				let that = this;
				xcViewUtils.message_error("超出上传图片数量,最多上传照片" + that.limit + "张");
			},
			handleAvatarSuccess_single(response, uploadFile){
				let that = this;
				if(response.code==1){
					that.file = response.data.fullurl;
					that.$emit('update:modelValue', that.file);
				}else{
					xcViewUtils.message_error(response.msg);
				}
			}
		}
	}
</script>

<style lang="scss">
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>